export default {
  data () {
    return {
      elevatorInterval: null,
      elevatorMap: new Map(),
      elevatorIndex: 0,
      elevatorData: [],
      elevatorDataColor: {
        0: {name: '离线', color: '#1e618c'},
        1: {name: '在线', color: '#33cadb'},
        2: {name: '预警', color: '#ffc600'},
        3: {name: '报警', color: '#fb6161'}
      },
      deviceElevatorOption: {
        tooltip: {
          show: true,
          backgroundColor: 'none',
          triggerOn: 'none'
        },
        series: [
          {
            name: '升降机',
            type: 'pie',
            radius: ['65%', '88%'],
            center: [0, '50%'],
            clockwise: false,
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              show: false
            },
            data: []
          },
          {
            name: '背景',
            type: 'pie',
            radius: ['65%', '58%'],
            center: [0, '50%'],
            clockwise: false,
            silent: true,
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              {name: '1', value: 0.46, itemStyle: {color: '#0f4061'}},
              {name: '2', value: 0.54, itemStyle: {color: 'transparent'}}
            ]
          }
        ]
      }
    }
  },
  methods: {
    initElevator () {
      this.elevatorData = []
      if (this.personElevatorEchart) {
        this.$echarts.dispose(this.$refs.deviceMonitorElvEchart)
        window.clearInterval(this.elevatorInterval)
        this.elevatorInterval = null
      }
      const transparentLength = this.deviceData.elevatorLiveList.length * 0.54
      if (transparentLength > 0) {
        const dataLength = this.deviceData.elevatorLiveList.length - transparentLength
        const startAngle = (dataLength) / 2 / (dataLength + transparentLength) * 360 + 194.5
        this.deviceData.elevatorLiveList.forEach(item => {
          let deviceId = Number.parseInt(item.deviceId)
          this.elevatorMap.set(deviceId, item)
          this.elevatorData.push({
            name: `${item.driverName}-${deviceId}`,
            value: dataLength / this.deviceData.elevatorLiveList.length,
            labelLine: {
              show: false,
              length: 10,
              length2: 60
            },
            itemStyle: {
              color: this.elevatorDataColor[item.status].color,
              borderColor: '#0f4061',
              borderWidth: 1
            },
            tooltip: {
              formatter: (params) => {
                if (params.name) {
                  const name = params.name.split('-')
                  const elevator = this.elevatorMap.get(Number.parseInt(name[1]))
                  const statusNum = Number.parseInt(elevator.status)
                  const drive = elevator.driverName || ''
                  const status = this.elevatorDataColor[statusNum].name
                  let eventType = '开机'
                  let eventTime = elevator.openTime || ''
                  let color = ''
                  if (statusNum === 2 || statusNum === 3) {
                    eventType = '事件'
                    eventTime = elevator.event
                    color = this.elevatorDataColor[statusNum].color
                  } else if (statusNum === 0) {
                    eventType = '开机'
                    eventTime = '未开机'
                  }
                  return `<p style="font-size: 16px; font-weight: bold; color: ${color};">${elevator.deviceName}</p>
                    <p style="font-size: 14px; margin-top: 10px;"><span style="color: #a8c5ed; margin: 0 10px 0 0;">状态:</span><span style="color: ${color}">${status}</span></p>
                    <p style="font-size: 14px; margin-top: 5px;"><span style="color: #a8c5ed; margin: 0 10px 0 0;">${eventType}:</span><span >${eventTime}</span></p>
                    <p style="font-size: 14px; margin-top: 5px;"><span style="color: #a8c5ed; margin: 0 10px 0 0;">司机:</span><span >${drive}</span></p>
            `
                }
              },
              position: (point, params) => {
                let half = this.towerMap.size / 2
                let top = point[1]
                if (half > params.dataIndex) {
                  top -= 65
                } else {
                  top -= 25
                }
                return {right: 0, top: top}
              }
            }
          })
        })
        this.elevatorData.push({
          name: 'transparent',
          value: transparentLength,
          itemStyle: {
            color: 'transparent'
          },
          tooltip: {
            show: false
          }
        })
        this.deviceElevatorOption.series[0].data = this.elevatorData
        this.deviceElevatorOption.series[0].startAngle = startAngle
        this.deviceElevatorOption.series[1].startAngle = startAngle
        this.personElevatorEchart = this.$echarts.init(this.$refs.deviceMonitorElvEchart)
        this.personElevatorEchart.setOption(this.deviceElevatorOption)
        this.setHoverElevator()
        this.initElevatorInterval()
        this.personElevatorEchart.on('mouseover', (params) => {
          if (params.name === 'transparent') {
            return
          }
          this.elevatorIndex = params.dataIndex
          this.setHoverElevator()
          window.clearInterval(this.elevatorInterval)
          this.elevatorInterval = null
        })
        this.personElevatorEchart.on('mouseout', (params) => {
          if (params.name === 'transparent') {
            return
          }
          this.elevatorIndex = params.dataIndex + 1
          this.initElevatorInterval()
        })
      }
    },
    initElevatorInterval () {
      if (!this.elevatorInterval) {
        this.elevatorInterval = setInterval(() => {
          if (this.elevatorIndex === this.deviceData.elevatorLiveList.length) {
            this.elevatorIndex = 0
          }
          this.setHoverElevator()
          this.elevatorIndex++
        }, 1000 * 5)
      }
    },
    setHoverElevator () {
      this.elevatorData.forEach((item, i) => {
        if (item.name !== 'transparent') {
          item.labelLine.show = false
          if (this.elevatorIndex === i) {
            item.labelLine.show = true
          }
        }
      })
      this.personElevatorEchart.setOption({
        series: [
          {
            name: '升降机',
            data: this.elevatorData
          }
        ]
      })
      this.personElevatorEchart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: this.elevatorIndex
      })
    }
  }
}
